<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="选择备件" width="767px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="600px">
        <px-form-item label="备件名称">
          <px-input v-model="queryParams.spareName" placeholder="请输入名称/编号" maxlength="50" />
        </px-form-item>
        <div class="equip-dialog-btn">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </div>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" height="405" border @selection-change="selectionChange">
        <px-table-column type="selection" min-width="40" align="center" />
        <px-table-column prop="facCodeDesc" label="归属地块" min-width="80" show-overflow-tooltip />
        <px-table-column prop="sparePartName" label="备件名称" min-width="80" show-overflow-tooltip />
        <px-table-column prop="eqpTypeCodeDesc" label="备件类型" min-width="80" show-overflow-tooltip />
        <px-table-column prop="specification" label="规格型号" min-width="80" show-overflow-tooltip />
        <px-table-column prop="brandVal" label="品牌" min-width="80" show-overflow-tooltip />
        <px-table-column prop="sparePartUnit" label="单位" min-width="80" show-overflow-tooltip />
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="tool-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确定</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import { querySparePartByType } from "@/api/erc/equip";
// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog", "addTableRow"]);
// 父级传过来的值
const props = defineProps(["visible", "eqpTypeCode"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    spareName: "",
    eqpTypeCode: ""
  },
  tableData: [],
  total: 0,
  selectRows: []
});
const { queryParams, tableData, selectRows, total } = toRefs(state);
// 查询备件列表
const queryTable = async () => {
  const params = { ...queryParams.value };
  queryParams.value.eqpTypeCode = props.eqpTypeCode;
  const data: any = await querySparePartByType(params);
  // console.log(data);
  tableData.value = data.data;
  total.value = data.total;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    spareName: "",
    eqpTypeCode: props.eqpTypeCode,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectRows.value = [];
  val.forEach((item: any) => {
    if (item.id) {
      selectRows.value.push(item);
    }
  });
};
// 确定选择备件
const handleSubmit = () => {
  emits("closeDialog");
  emits("addTableRow", selectRows.value);
};

// 打开弹窗
const openDialog = () => {
  queryParams.value.eqpTypeCode = props.eqpTypeCode;
  queryParams.value.spareName = "";
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");

.equip-dialog-wrap .equip-dialog-content .equip-form {
  :deep(.px-form-item) {
    width: 70%;
  }
}
</style>
